<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--ios是否允许创建快捷方式-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--ios顶部通知栏的样式：黑色-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!--遇到数字不让转换成电话号码的格式-->
    <meta content="telephone=no" name="format-detection">
    <meta name="description" content="乐淘是中国最大的正品运动鞋，皮鞋专卖" >
    <meta name="Keywords" content="乐淘 乐淘鞋城 买鞋子 上乐淘 运动鞋城" >
    <link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="assets/mui/css/mui.css">
    <link rel="stylesheet" href="assets/fa/css/font-awesome.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <title>乐淘-商品列表</title>
</head>
<body>
<!--首页-->
<!--通栏-->
<div class="ct_container">
    <header class="ct_header">
        <!--history.back():回到刚才的那个页面-->
        <a href="javascript:history.back();" class="left"><span class="fa fa-arrow-left"></span></a>
        <h3>搜索中心</h3>
    </header>
    <div class="ct_content">
        <div class="ct_wrapper">
            <!--区域滚动-->
            <div class="mui-scroll-wrapper" id="refreshContainer">
                <div class="mui-scroll">
                    <!--搜索框-->
                    <div class="ct_search">
                        <!--使用form的作用：在调用虚拟键盘时enter键变成搜索按钮-->
                        <form action="#">
                            <input type="search" placeholder="搜索你喜欢的商品">
                        </form>
                        <!--阻止页面跳转，这个地方阻止了可以用location定位到指定的页面-->
                        <a href="javascript:;" >搜索</a>
                    </div>
                    <!--排序-->
                    <div class="ct-order">
                        <a href="javascript:;" class="now" data-order="time">上架时间 <span class="fa fa-angle-down"></span></a>
                        <a href="javascript:;" data-order="price">价格 <span class="fa fa-angle-down"></span></a>
                        <a href="javascript:;" data-order="num">销量 <span class="fa fa-angle-down"></span></a>
                        <a href="javascript:;" data-order="scale">折扣 <span class="fa fa-angle-down"></span></a>
                    </div>
                    <!--商品列表-->
                   <div class="ct_product">
                       <!--todo-->

                   </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="ct_footer">
        <a class="tab_home fa fa-home" href="index.html"><span>首页</span></a>
        <a class="tab_cate fa fa-bars now" href="category.html"><span>分类</span></a>
        <a class="tab_cart fa fa-shopping-cart" href="user/cart.html"><span>购物车</span></a>
        <a class="tab_user fa fa-user" href="user/user.html"><span>会员中心</span></a>
    </footer>
</div>
<script type="text/template" id="product_list">
    <% for (var i = 0 ; i < data.length; i++ ) { %>
    <% var item = data[i] %>
    <div class="pro_item">
        <a href="product.html?productId=<%=item.id%>" class="pro_item_box">
        <% if(item.pic) { %>
            <img src="<%=item.pic[0].picAddr%>" alt="">
        <% }else{ %>
            <img src="images/none.jpg" alt="">
            <% } %>
            <!--两行省略-->
            <p class="mui-ellipsis-2"><%=item.proName%></p>
            <p><span class="nowPrice">&yen;<%=item.price%></span><span class="oldPrice">&yen;<%=item.oldPrice%></span></p>
            <button class="button">立即购买</button>
        </a>
    </div>
    <% } %>
</script>
<script src="assets/mui/js/mui.js"></script>
<script src="assets/jquery/jquery-1.12.4.js"></script>
<!--<script src="assets/zepto/zepto.min.js"></script>-->
<script src="js/common.js"></script>
<script src="js/searchList.js"></script>
<script src="js/search.js"></script>
<script src="assets/artTemplate/template-native.js"></script>
<!--<script src="js/common.js"></script>-->
</body>
</html>